import React, {memo, useEffect} from 'react'
import {HomeWrapper} from "@/views/home/style";
import HomeBanner from "@/views/home/c-cpns/home-banner";
import {shallowEqual, useDispatch, useSelector} from "react-redux";
import {fetchHomeGoodPriceDataAction} from "@/store/modules/home";
import HomeSectionV1 from "@/views/home/c-cpns/home-section-v1";
import HomeSectionV2 from "@/views/home/c-cpns/home-section-v2";
import {isEmptyO} from "@/utils";

const Home = memo(() => {
    const {goodPriceInfo, highScoreInfo, discountInfo,hotRecommendInfo} = useSelector((state) => ({
        goodPriceInfo: state.home.goodPriceInfo,
        highScoreInfo: state.home.highScoreInfo,
        discountInfo: state.home.discountInfo,
        hotRecommendInfo: state.home.hotRecommendInfo

    }), shallowEqual);

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(fetchHomeGoodPriceDataAction())

    }, [dispatch]);

    return (
        <HomeWrapper>
            <HomeBanner/>
            <div className='discount'>
                {/*<SectionHeader title={discountInfo.title} subTitle={discountInfo.subTitle}/>*/}
                {/*<SectionTabs tabs={addrTabs} tabClick={tabClick}></SectionTabs>*/}
                {/*<SectionRooms roomItems={discountInfo.dest_list?.[tabName]} itemWidth="33.333%"/>*/}
                {isEmptyO(hotRecommendInfo) && <HomeSectionV2 infoData={hotRecommendInfo}></HomeSectionV2>}
                {isEmptyO(discountInfo) && <HomeSectionV2 infoData={discountInfo}></HomeSectionV2>}
            </div>
            <div className='content'>
                {isEmptyO(discountInfo) && <HomeSectionV1 infoData={goodPriceInfo}></HomeSectionV1>}
                {isEmptyO(discountInfo) && <HomeSectionV1 infoData={highScoreInfo}></HomeSectionV1>}
            </div>
        </HomeWrapper>
    )
})

export default Home